<!--
 * @FilePath     : /study_code/css/float7.html
 * @Description  : 内联 & 内联块 脱离文档流后，变为块元素，尺寸 & 垂直外边距生效
 * @Date         : 2025-04-27 10:29:49
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-27 10:29:50
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
    <style>
      .box {
        width: 200px;
      }

      .p1 {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio perferendis accusamus
      ipsam. Minus vero similique perspiciatis ullam eaque a debitis est mollitia eius voluptate
      sint molestiae sequi, iusto deleniti dolorem iure voluptatibus, corrupti nam harum alias
      totam? Veniam, repudiandae architecto?
      <button>这是一个 button 内联块元素</button>
      <p class="p1">这是一个浮动的元素</p>
      <span>这是一个span内联元素</span>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio perferendis accusamus
      ipsam. Minus vero similique perspiciatis ullam eaque a debitis est mollitia eius voluptate
      sint molestiae sequi, iusto deleniti dolorem iure voluptatibus, corrupti nam harum alias
      totam? Veniam, repudiandae architecto?
      <button>这是一个 button 内联块元素</button>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio perferendis accusamus
      ipsam. Minus vero similique perspiciatis ullam eaque a debitis est mollitia eius voluptate
      sint molestiae sequi, iusto deleniti dolorem iure voluptatibus, corrupti nam harum alias
      totam? Veniam, repudiandae architecto?
      <!-- 文本不会压在浮动元素下 -->
    </div>
  </body>
</html>
